<!--
  斗拱的分账渠道账号
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/05/12 10:59
-->
<template>
  <div>
    <!-- 引入公共样式和数据表单 -->
    <DiyDivisionFormPage ref="diyDivisionFormPageRef" />

    <a-row>
      <a-col offset="2" span="10">
        <a-alert type="info">
          <template #message>
            <a-button v-if="vdata.showMode == 'detail'" type="link" @click="vdata.showMode = 'subMchId'">已有子商户号？ 切换到快速模式</a-button>
            <a-button v-else type="link" @click="vdata.showMode = 'detail'">切换到详细信息模式</a-button>
          </template>
        </a-alert>
      </a-col>
    </a-row>

    <div v-if="vdata.showMode == 'subMchId'">
      <a-divider orientation="left" style="color: #1A66FF;">账户信息</a-divider>
      <a-form
        ref="divisionAccountFormRef"
        style="margin-top: 20px;"
        :model="vdata.currentReceiver"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :rules="subMchRules"
      >
        <a-form-item label="持卡人姓名" name="accName">
          <a-input v-model:value.trim="vdata.currentReceiver.accName" />
        </a-form-item>

        <a-form-item label="账号类型" name="accType">
          <a-select v-model:value="vdata.currentReceiver.accType" style="width: 110px" placeholder="账号类型">
            <a-select-option :value="0">个人</a-select-option>
            <a-select-option :value="1">商户类型</a-select-option>
          </a-select>
        </a-form-item>
       
        <a-form-item label="子商户号（subMchId）" name="accNo">
          <a-input v-model:value.trim="vdata.currentReceiver.accNo" />
        </a-form-item>

        <a-form-item label="取现卡序列号" name="tokenNo">
          <a-input v-model:value.trim="vdata.currentReceiver.tokenNo" />
        </a-form-item>
      </a-form>
    </div>

    <DgpayApplyment v-if="vdata.showMode == 'detail'" ref="dgpayApplymentRef" />
  </div>
</template>

<script lang="ts" setup>

import DgpayApplyment from 'UIC/JeepayMchApplyment/diy/dgpay/Applyment.vue'
import { reactive, ref, getCurrentInstance, provide, computed } from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
import DiyDivisionFormPage from '../../diyDivisionForm/DiyDivisionFormPage.vue'

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const diyDivisionFormPageRef = ref()
const divisionAccountFormRef = ref()
const dgpayApplymentRef = ref()

let emptyObject = {}

const subMchRules = {
   accNo: [ ruleGenerator.requiredInput('子商户号') ],
   tokenNo: [ ruleGenerator.requiredInput('取现卡序列号') ],
   accName: [ ruleGenerator.requiredInput('持卡人姓名') ],
   accType: [ ruleGenerator.requiredSelect('账号类型', 'number') ],
}

const vdata : any = reactive({
  applymentDetailInfo: {}, //盛付通的进件资料对象 

  showMode: 'detail', //detail: 详细信息，  subMchId: 简介模式

  currentReceiver: {   // 当前分账用户信息
      accType: 0,
   }
})

// 向子组件注入： 兼容数据
provide('mchApplymentData', computed( ()=> emptyObject) )

// 向子组件注入： 进件参数具体数据
provide('applymentDetailInfo', computed( ()=> vdata.applymentDetailInfo) )

provide('isView', false)
provide('configMode', 'divsionMode')


// 获取请求列表（List格式）， 返回Promise对象，  值为数组类型
async function getReqDataList(){

  // 验证主表单 and 复制信息到主提交记录中
  await diyDivisionFormPageRef.value.validateAndGetData().then(formData => {
    Object.assign(vdata.currentReceiver, formData)
  })

  // 验证
  if(vdata.showMode == 'subMchId'){
    await divisionAccountFormRef.value.validate()
    
  }else{ // 验证 进件资料表单信息

    await dgpayApplymentRef.value.saveDataPreCallback(false)
  }

  // 组装数据
  if(vdata.showMode == 'subMchId'){
    
    vdata.currentReceiver.channelExtInfo = { tokenNo: vdata.currentReceiver.tokenNo, isHasAccount: true }
    
  }else{ // 验证 进件资料表单信息

     // 个人类型
    if(vdata.applymentDetailInfo.merchantType == 1){
      vdata.currentReceiver.accType = 0
    }else{
      vdata.currentReceiver.accType = 1  //商户类型
    }

    vdata.currentReceiver.accNo = vdata.applymentDetailInfo.settAccountNo
    vdata.currentReceiver.accName = vdata.applymentDetailInfo.settAccountName
    vdata.currentReceiver.channelExtInfo = JSON.stringify(vdata.applymentDetailInfo)
  }
  
  return await new Promise((resolve, reject) => {
    resolve([vdata.currentReceiver])
  })
}

function changeState(index, state){
  diyDivisionFormPageRef.value.changeState(index, state)
}


defineExpose({getReqDataList, changeState})
</script>
